<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.onelist{
				margin: 10px 0 5px 12px;
			}
			.onelist label{
				width: 80px;
				display: inline-block;
			}
			.onelist input,.onelist select{
				height: 25px;
				line-height: 25px;
				width: 220px;
				border-radius: 3px;
				border: 1px solid #e2e2e2;
			}
			.onelist input[type="submit"]{
				width: 150px;
				height: 30px;
				line-height: 30px;
			}
			input:required:valid,select:required:valid{
				box-shadow: 0 0 5px green;
				border-color: green;
			}
			input:focus:invalid,select:focus:invalid{
				box-shadow: 0 0 5px red;
				border: red;
				outline: 1px solid red;
			}
		</style>
	</head>
	<body>
		<form action="" class="myform" method="post">
			<div class="onelist">
				<label for="username">手机号</label>
				<input type="text" name="username" id="username" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确的手机号码')" required>                                   
			</div>
			<div class="onelist">
				<label for="password">密码</label>
				<input type="password" name="password" id="password" placeholder="6~20位" pattern="^[a-zA-Z0-9]{5,19}$" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('请输入正确密码')" required>
			</div>
			<div class="onelist">
				<label for="repassword">确认密码</label>
				<input type="password" name="repassword" id="repassword" placeholder="确认密码" required>
			</div>
			<div class="onelist">
				<label for="repassword">了解方式</label>
				<select name="know" id="" required>
					<option value="">==请选择==</option>
					<option value="1">搜索引擎</option>
					<option value="2">朋友圈</option>
					<option value="3">朋友推广</option>
					<option value="4">广告投放</option>
				</select>
			</div>
			<div class="onelist">
				<input type="submit" value="提交" name="" id="">
			</div>
		</form>
	</body>
</html>